<template>
  <div class="left-box">
    <div class="left-title">
      <div class="title">角色列表</div>
      <div>
        <el-button v-if="handle" v-permission="['BUSSINESSROLEMANAGE_ADD_BUTTON']" type="text"
                   icon="el-icon-plus" @click="handleAdd">新增{{ name }}</el-button>
        <el-button v-if="handle" v-permission="['BUSSINESSROLEMANAGE_OTHEROLE_BUTTON']" type="text"
                   icon="el-icon-upload2" @click="handleImport">三方角色导入</el-button>
      </div>
    </div>
    <div style="display: flex;justify-content: space-between;line-height: 32px;">
      <el-input
        v-model.trim="filterText"
        prefix-icon="el-icon-search"
        size="small"
        placeholder="请输入角色名称"
        maxlength="20"
        class="limit"
        clearable
      />
      <el-select v-model="filterValue" size="small" filterable
                 clearable style="width: 100%; margin-left:12px;" placeholder="请选择所属应用">
        <el-option
          v-for="item in appList"
          :key="item.appId"
          :label="item.appName"
          :value="item.appCode"
        />
      </el-select>
    </div>
    <!-- {{ roleList.length }}
    {{ searchTree }} -->
    <div v-if="roleList.length<=0|| (roleList.length>0&&queryParams.roleName&&searchTree.length<=0)" class="NoRoleList">
      <el-image style="width: 112px; height: 122px" :src="require('@/framework/assets/empty__image@2x.png')" />
      <p style="font-size: 14px;color:#909399;margin-top:28px;font-weight:400;">暂无数据</p>
    </div>
    <div id="tree" style="height: 600px;overflow: auto;margin-top: 16px;">
      <el-tree
        v-if="roleList.length>0 ||(roleList.length>0&&queryParams.roleName&&searchTree.length>0) "
        ref="leftTree"
        :style="{'--lightOpacity':lightTheme}"
        class="left-tree"
        empty-text=""
        :data="roleList"
        :props="defaultProps"
        default-expand-all
        highlight-current
        :node-key="defaultProps.roleId"
        :current-node-key="currentKey"
        :filter-node-method="filterNode"
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
      >
        <div slot-scope="{key,data}" class="custom-tree-node">
          <i :class="data.statusFlag == 1?'yuandianOpen':'yuandianClose'" />
          <DtOverTooltip v-if="data.followAppName" :content="data.roleName+'('+data.followAppName+')'" />
          <DtOverTooltip v-else :content="data.roleName" />
          <template>
            <el-dropdown>
              <span @click.stop>
                <svg-icon class="sandian" icon-class="sandian" />
              </span>
              <el-dropdown-menu slot="dropdown" style="width:73px;text-align:center">
                <el-dropdown-item v-preventReClick="3000" class="btn" @click.native="handleChangeStatus(data)">{{ data.statusFlag == 1?'禁用':'启用' }}</el-dropdown-item>
                <!-- <el-dropdown-item v-permission="['BUSSINESSROLEMANAGE_UPDATE_BUTTON']" class="btn" @click.native="handleUpdate(data)">修改</el-dropdown-item> -->
                <el-dropdown-item v-permission="['BUSSINESSROLEMANAGE_COPYROLE_BUTTON']" class="btn" @click.native="handleCopy(data)">复制</el-dropdown-item>
                <span class="disableBtn">
                  <el-dropdown-item v-preventReClick="3000" v-permission="['BUSSINESSROLEMANAGE_DEL_BUTTON']" :disabled="data.statusFlag == 1"
                                    :class="data.statusFlag == 1?'btnDelDisabled': 'btnDel'" @click.native="handleDelete(data)">删除</el-dropdown-item>
                </span>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </div>
      </el-tree>
    </div>
    <scroll ref="divScroll" div-id="tree" :page-count="totalPage"
            :current-page="queryParams.pageNo" @current-change="currentChange" />
    <BussinessRoleEdit ref="BussinessRoleRef" />
    <ThridRoleImport ref="ThridRoleImportRef" />
  </div>
</template>
<script>
import BussinessRoleEdit from './BussinessRoleEdit.vue'
import ThridRoleImport from './thridRoleImport.vue'
import scroll from './scroll.vue'
import { rolePage, updteStatus, deleteRole, getCurrAdminGroupApps } from '@/framework/api/authCenter/bussinessRoleManage'

export default {
  name: 'LeftRoleList',
  components: {
    BussinessRoleEdit,
    ThridRoleImport,
    scroll
  },
  dicts: [],
  props: {
    name: {
      type: String,
      default: '角色'
    },
    handle: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      filterText: '',
      filterValue: '',
      roleList: [],
      defaultProps: {
        children: 'children',
        label: 'roleName',
        roleId: 'roleId'
      },
      queryParams: {
        pageNo: 1,
        pageSize: 20,
        roleName: '',
        roleCode: '',
        followApp: ''
      },
      currentKey: '',
      appList: [],
      totalPage: 0,
      selectRole: {},
      searchTree: []
    }
  },
  computed: {
    lightTheme() {
      return `${this.$store.state.settings.theme}19`
    }
  },
  watch: {
    filterText(val) {
      this.$refs.leftTree.filter(val)
      this.queryParams.roleName = val
      this.searchTree = this.roleList.map((item) => {
        return item.roleName.includes(val)
      }).filter((val) => { return val === true })
    },
    filterValue(val) {
      this.queryParams.followApp = val
      this.getList(1)
    }
  },
  created() {
    this.getList()
    this.getAppList()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.roleName.indexOf(value) !== -1
    },
    getList(type) {
      // type为1时就要重置列表，否则就是一直push
      if (type === 1) {
        this.roleList = []
        this.queryParams.pageNo = 1
      }
      rolePage(this.queryParams).then((res) => {
        this.roleList.push(...res.data.rows)
        this.totalPage = res.data.totalPage
        if (this.selectRole) {
          this.$emit('treeClick', this.selectRole)
        }
        // if (this.roleList && this.roleList.length > 0) {
        //   this.selectRole = this.roleList[0]
        //   this.currentKey = this.roleList[0].roleId
        //   this.$emit('treeClick', this.selectRole)
        // this.$nextTick(() => {
        //   this.$refs.leftTree.setCurrentKey([])
        // })
        // } else {
        //   this.$emit('treeClick', [])
        // }
      })
    },
    getAppList() {
      getCurrAdminGroupApps().then((res) => {
        this.appList = res.data
      })
    },
    currentChange(num) {
      this.queryParams.pageNo = num
      this.$refs.divScroll.loadFinish()
      this.getList()
    },
    handleNodeClick(row) {
      this.currentKey = row.roleId
      this.selectRole = row
      this.$emit('treeClick', row)
    },
    handleAdd() {
      this.$refs.BussinessRoleRef.openDrawer('create')
    },
    handleCopy(data) {
      this.$refs.BussinessRoleRef.openDrawer('copy', data)
    },
    // handleUpdate(data) {
    //   this.$refs.BussinessRoleRef.openDrawer('update', data)
    // },
    /** 切换角色状态 */
    handleChangeStatus(data) {
      updteStatus({ roleId: data.roleId, statusFlag: data.statusFlag === 1 ? 2 : 1 }).then((res) => {
        this.$dtMessage({
          message: '修改状态成功',
          type: 'success'
        })
        data.statusFlag = data.statusFlag === 1 ? 2 : 1
        // this.getList()
        this.$emit('changeStatus')
      })
    },
    // 删除
    handleDelete(data) {
      this.$dtMessageBox({ title: '提示', message: '是否确认删除?', type: 'warning' }).then(() => {
        deleteRole({ roleId: data.roleId }).then((res) => {
          this.$dtMessage({
            message: '删除成功',
            type: 'success'
          })
          // 删除成功后，并没有重新走接口获取列表
          this.$refs.leftTree.remove(data)
          // 需要重新定位到选中的数据
          // if (data.roleId == this.currentKey) {
          //   this.getList()
          // } else {
          // this.$refs.leftTree.remove(data)
          // }
        })
      }).catch(() => {
        // 取消不做操作
      })
    },
    handleImport() {
      this.$refs.ThridRoleImportRef.openImportDialog()
    }
  }
}
</script>
<style lang="scss" scoped>
.left-box{
  height: 100%;
}
.left-title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin:4px 0 16px 0;
    .title{
        font-size: 16px;
        color: #131414;
        font-weight: 500;
    }
}
.NoRoleList{
  display: flex;
  margin-top:153px;
  justify-content:center;
  flex-direction: column;
  align-items: center;
}
.yuandianOpen{
    width: 8px;
    height: 8px;
    border-radius:50%;
    margin:auto 9px auto 8px;
    background: linear-gradient(180deg, #B7FF98 0%, #88FF55 10%, #67FF26 36%, #5BD924 90%, #50C120 100%);
    box-shadow: inset 0px 0px 1px 0px rgba(115,115,115,0.302), 0px 0px 2px 0px rgba(0,0,0,0.12);
}
.yuandianClose{
    width: 8px;
    height: 8px;
    margin:auto 9px auto 8px;
    border-radius:50%;
    background: #527643;
}
.sandian{
    color: #131414;
    margin-right: 8px;
    font-size: 14px;
}
.btn{
    color:#131414;
}
.btnDel{
    color:#F56C6C;
}
.btnDelDisabled{
  pointer-events:none;
  color:#f9a7a7;
}
.disableBtn{
  cursor: not-allowed;
}
::v-deep .el-dropdown-menu__item.is-disabled {

}
.left-tree{
    // margin-top: 16px;
    // overflow: auto;
    // height: 586px;
  }
  ::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
          background-color:var(--lightOpacity);
          border-radius: 4px;
    }
  ::v-deep .el-tree-node__content:hover, .el-upload-list__item:hover{
    background-color:var(--lightOpacity);
    border-radius: 4px;
  }
  ::v-deep .el-tree-node__content{
    height: 38px;
    line-height:38px;
    overflow: hidden;
  }
  .custom-tree-node{
    display: flex;
    color: #131314;
    font-size: 14px !important;
    align-items: center;
    overflow: hidden;
    width: 100%;
    height: 38px;
    line-height:38px;
    .tree-name{
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      flex:1;
    }
  }
.NoRoleList{
    display: flex;
}
::v-deep .el-button--medium {
  font-weight: 400;
}
::v-deep .el-tree-node__content > .el-tree-node__expand-icon {
    display: none;
}
</style>
